<template>
  <div class="head-warp flex flex-x-c flex-y-c">
    <div class="search-input flex flex-y-c bg-ff">
      <img src="../../img/search_head.png" alt="" />
      <span class="keyword">{{ searchKeyword }}</span>
      <a href="" class="scan"></a>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHeadSearch",
  data() {
    return {
      searchKeyword: "45613", // 搜索 关键字
      searchIcon: "",
      scanIcon: ""
    };
  },
  methods: {
    // 返回图片地址
    returnSearchIcon() {
      return this.searchIcon
        ? this.searchIcon
        : require("../../img/search_head.png");
    },
    // 获取搜索关键字
    getKeyword() {}
  }
};
</script>

<style scoped lang="scss">
.head-warp {
  width: 100%;
  height: 164px;
  background: $ea645b;
  padding: 0 30px;
  .search-input {
    /*width: 1168px;*/
    width: 100%;
    height: 108px;
    padding: 0 40px;
    border-radius: 50px;
    img {
      width: 54px;
      height: 54px;
    }
    .keyword {
      flex: 1;
      height: 54px;
      line-height: 54px;
      padding: 0 20px;
      font-size: 43px;
      color: $b8b8b8;
    }
    .scan {
      width: 54px;
      height: 54px;
      background: url("../../img/scan.png") no-repeat 0 0 / 100% 100%;
    }
  }
}
</style>
